<script setup>
import moment from 'dayjs'

onMounted(() => { })

const commentsData = ref([
  {
    id: 'A',
    avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
    author: '评论作者名A',
    datetime: '今天16:38',
    content: '评论作者名A写的评论内容。',
    likeNum: 7
  },
  {
    id: 'B',
    avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
    author: '评论作者名B',
    datetime: '今天16:38',
    content: '评论作者名B写的评论内容。',
    likeNum: 7
  },
  {
    id: 'C',
    avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
    author: '评论作者名C',
    datetime: '今天16:38',
    content: '评论作者名C写的评论内容。',
    likeNum: 7
  },
  {
    id: 'd',
    avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
    author: '评论作者名C',
    datetime: '今天16:38',
    content: '评论作者名C写的评论内容。',
    likeNum: 7
  },
  {
    id: 'e',
    avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
    author: '评论作者名C',
    datetime: '今天16:38',
    content: '评论作者名C写的评论内容。',
    likeNum: 7
  },
])

// 留言
const submitReply = () => {
  const data = {
    id: Math.random * 1000,
    avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
    author: 'zhngzhao',
    datetime: moment().format('YYYY-MM-DD hh:mm:ss'),
    content: replyData.value,
    likeNum: 0
  }
  if (isReply.value) {
    replyTo.reply = data
    isReply.value = false
    replyTo.value = null
    replyData.value = null
    return
  }
  commentsData.value.push(data)
  isReply.value = false
  replyData.value = null
}
// 留言或者回复内容
const replyData = ref(null)

// 滚动事件响应函数
const scrollHandler = () => { }
// 是否是消息回复，还是留言
const isReply = ref(false)

// 被回复消息的人
let replyTo = ref(null)

// 回复某人的消息，聚焦输入框
const toReply = (replyObject) => {
  isReply.value = true
  replyTo = replyObject
}
// 点赞
const giveLike = (data) => {
  data.likeNum += 1
}
</script>
<template>
  <div>
    <t-list :split="true" style="max-height: 700px" @scroll="scrollHandler" layout="vertical">
      <t-list-item v-for="(item, index) in commentsData" :key="index">
        <template #content>
          <t-comment :avatar="item.avatar" :author="item.author" :datetime="item.datetime" :content="item.content">
            <template #actions>
              <span key="thumbUp" @click="giveLike(item)">
                <t-icon name="thumb-up" />
                <span class="action-text">{{item.likeNum}}</span>
              </span>
              <span key="chat">
                <t-icon name="chat" />
                <span class="action-text" @click="toReply(item)">回复</span>
              </span>
            </template>
            <template #reply v-if="item.reply">
              <t-comment avatar="https://tdesign.gtimg.com/site/avatar.jpg" :datetime="item.reply.datetime"
                :content="item.reply.content">
                <template #author>
                  <span>{{item.reply?.author}}</span>
                  <t-icon name="caret-right-small" size="small" class="author-icon" />
                  <span>{{item.author}}</span>
                </template>
                <template #actions>
                  <span key="thumbUp" @click="giveLike(item.reply)">
                    <t-icon name="thumb-up" />
                    <span class="action-text">{{item.reply?.likeNum}}</span>
                  </span>
                  <span key="chat">
                    <t-icon name="chat" />
                    <span class="action-text" @click="toReply(item)">回复</span>
                  </span>
                </template>
              </t-comment>
            </template>
          </t-comment>
        </template>
      </t-list-item>
    </t-list>
    <t-comment avatar="https://tdesign.gtimg.com/site/avatar.jpg" style="margin-top: 20px;">
      <template #content>
        <div class="form-container">
          <t-textarea v-model="replyData" placeholder="请输入内容" :autofocus="isReply" />
          <t-button class="form-submit" @click="submitReply">{{ isReply? '回复':'留言'}}</t-button>
        </div>
      </template>
    </t-comment>
  </div>
</template>

<style scoped lang="less">
.action-text {
  display: inline-block;
  margin-left: 6px;
  line-height: 15px;
}

.author-icon {
  display: inline-block;
  margin: 0 4px;
}

.form-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  .form-submit {
    margin-top: 8px;
  }
}
</style>